<template>
    <div class="layout-container">
      <el-container>
        <el-header class="header">
          <el-row :gutter="20">
            <el-col :span="4">
              <span>你好: {{ $store.state.worker.info.name }}</span>
            </el-col>
            <el-col :span="16">
              <span>个人订单</span>
            </el-col>
            <el-col :span="4">
              <span>
                <el-button type="warning" @click="logout" round>退出登录</el-button>
              </span>
            </el-col>
          </el-row>
        </el-header>
        <el-container>
          <el-aside class="aside">
            <el-menu active-text-color="#409eff" default-active="2" text-color="#303133" router>
              <el-menu-item :index="item.path" v-for="item in list" :key="item.path">
                <component :is="item.meta.icon" style="width: 15px;height: 15px;"></component>
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view>
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  import { useRouter } from "vue-router";
  import { useStore } from "vuex";
  import { ElMessage, ElMessageBox } from "element-plus";
  export default {
    name: "UserView",
    data() {
      return {
        router: useRouter(),
        store: useStore(),
        list: []
      }
    },
    methods: {
      logout() {
        ElMessageBox.confirm("确认退出登录吗？").then(() => {
          this.store.commit("user/setInfo", {});
          this.store.commit("token/setToken", "");
          this.router.push("/");
        }).catch(() => {
          ElMessage({
            message: '取消退出登录',
          })
        });
      }
    },
    created() {
      this.list = this.router.getRoutes().filter(v => v.meta.type === "worker");
    },
  }
  </script>
  
  <style scoped>
  .layout-container {
    display: flex;
    padding: 0;
    margin: 0;
    height: 97vh;
    flex-direction: column;
    text-align: center;
  
    .header {
      font-size: 15px;
      background-color: #8c94a4;
      color: #fff;
  
      .el-row {
        margin: 15px;
      }
    }
  
    .aside {
      width: 200px;
      background-color: white;
      .el-menu {
        width: 200px;
        background-color:antiquewhite;
      }
    }
  }
  </style>